<template>
  <div class="main">
    <div class="biao">
      <h2 class="zhuan">专家介绍</h2>
    </div>
    <div class="zhu" v-for="item in types" :key="item">
      <el-row>
        <el-col :span="6"
          ><div class="grid-content1" />
          <div class="aa">
            <el-image :src="item.img" class="image" /></div
        ></el-col>
        <div></div>
        <el-col :span="18"
          ><div class="grid-content1" />
          <el-row class="xinxi">
            <el-col :span="12"
              ><div class="grid-content bg-purple-dark" />
              <p>医生姓名: {{ item.docName }}</p>
            </el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple-dark" />
              <p>职位: {{ item.docTitle }}</p>
            </el-col>
            <el-divider />
          </el-row>
          <el-row class="xinxi1">
            <el-col :span="4"
              ><div class="grid-content bg-purple-dark">
                <p>出诊日期:</p>
              </div>
            </el-col>
            <el-col :span="4" v-for="time in menzhi" :key="time"
              ><div class="grid-content bg-purple-dark">
                <p>{{ time.day }}</p>
              </div>
            </el-col>
            <el-divider />
          </el-row>
          <el-row class="xinxi1">
            <el-col :span="24"
              ><div class="grid-content bg-purple-dark" />
              <p>医生简介: {{ item.introduction }}</p>
            </el-col>
            <el-divider /> </el-row
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      id: "",
      types: "",
      menzhi: "",
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getNewsById(this.id);
    this.getDoctorWorkById(this.id);
  },
  methods: {
    getNewsById(id) {
      get("/getDoctorsByName", {
        docId: id,
      }).then((res) => {
        this.types = res.data.data;
        console.log(this.types);
      });
    },
    getDoctorWorkById(id) {
      get("/getDoctorWorkById", {
        docId: id,
      }).then((res) => {
        this.menzhi = res.data.data.splice(0, 5);
        console.log(this.menzhi);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin-right: 10%;
  margin-left: 10%;
}
.zhu {
  width: 100%;
  height: 100%;
  border: 1px solid rgb(228, 225, 225);
}
.biao {
  width: 10%;
}
.zhuan {
  text-align: center;
}
.grid-content bg-purple {
  height: 100%;
  background-color: red;
}
.aa {
  margin-left: 25%;
  margin-top: 15%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}
.aa img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  height: 100%;
}
.xinxi {
  margin-top: 55px;
}
p {
  font-family: "微软雅黑", Arial;
  font-size: 20px;
}
</style>
